import { Form, Input, Modal, Select } from 'antd';
import { Fragment, useEffect, useState } from 'react';
import { reqRoleName } from '../../api/api';

const addItems = [
  { name: "fd_teacNum", lable: "教师", offset: 1, span: 8, disabled: true, data: "sda" },
  { name: "fd_curriculumNum", lable: "课程", rules: { must: { required: true, message: 'Please input the Email of collection!', } }, offset: 1, span: 8, disabled: false },
  { name: "fd_studNum", lable: "学生学号", rules: { must: { required: true, message: 'Please input the Email of collection!', } }, offset: 1, span: 8, disabled: false },
  { name: "fd_assessmentScore", lable: "考核分", rules: { must: { required: true, message: 'Please input the Email of collection!', } }, offset: 1, span: 8, disabled: false },
  { name: "fd_gradeInCourseWork", lable: "平时分", rules: { must: { required: true, message: 'Please input the Email of collection!', } }, offset: 1, span: 8, disabled: false },
]

const AddGrade = ({ open, onCreate, onCancel, role, curriculum }) => {
  const [form] = Form.useForm();
  const [teacherName, setTeacherName] = useState()

  const teacherToName = (role) => {
    reqRoleName(role).then(
      res => {
        setTeacherName(res.data)
      }
    )
  }

  useEffect(() => {
    if (role !== null) {
      teacherToName(role)
    }
  }, [role])



  return (
    <Modal
      width={330}
      open={open}
      okText="提交"
      cancelText="退出"
      onCancel={onCancel}
      onOk={() => {
        form
          .validateFields()
          .then((values) => {
            form.resetFields();
            console.log('Values', values)
            onCreate(values);
          })
          .catch((info) => {
            console.log('Validate Failed:', info);
          });
      }}
    >
      <Form
        form={form}
        layout="horizontal"
        name="form_in_modal"
        wrapperCol={{
          span: 9,
        }}
        className="updata-user-infor"
      >
        {
          addItems.map((item) => {
            return (
              <Fragment key={item.name}>
                {
                  item.name === "fd_teacNum" ?
                    <Form.Item
                      name={item.name}
                      label={item.lable}
                      rules={[item.rules?.must]}
                      labelCol={{ offset: item.offset, span: item.span }}
                      wrapperCol={{ span: 12 }}
                      labelAlign="left"
                      initialValue={role?.fd_idNum}
                    >
                      <Select
                        showSearch
                        filterOption={(input, option) =>
                          (option?.label ?? '').toLowerCase().includes(input.toLowerCase())
                        }
                        disabled
                        showArrow={false}
                        listHeight={90}
                        style={{ width: 140 }}
                        key="value"
                        options={
                          [{ value: role?.fd_idNum, label: teacherName?.fd_name }]
                        }
                      />
                    </Form.Item>
                    :
                    <Form.Item
                      name={item.name}
                      label={item.lable}
                      rules={[item.rules?.must]}
                      labelCol={{ offset: item.offset, span: item.span }}
                      wrapperCol={{ span: 12 }}
                      labelAlign="left"
                    >
                      {
                        item.name === "fd_curriculumNum" ?
                          <Select
                            showSearch
                            filterOption={(input, option) =>
                              (option?.label ?? '').toLowerCase().includes(input.toLowerCase())
                            }
                            listHeight={90}
                            style={{ width: 140 }}
                            key="value"
                            options={
                              curriculum
                            }
                          /> :
                          <Input />
                      }
                    </Form.Item>

                }
              </Fragment>
            )
          })
        }
      </Form>
    </Modal>
  );
};
export default AddGrade